<template>
  <basic-container>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <div class="card-body">
        <avue-crud
          :data="tableData"
          :option="option"
          :page="page"
          :table-loading="tableLoading"
          @size-change="sizeChange"
          @current-change="currentChange"
          @search-change="searchChange"
          @search-reset="searchReset"
        >
        </avue-crud>
      </div>
    </div>
  </basic-container>
</template>
<script>
  import {projectRegister} from "@/api/planning/project";
  import {getProtocolListTrack} from "@/api/planning/detailList";
  import {commitList} from "@/api/planning/detailList";

  export default {
    name: "listTrack",
    created(){
      window.listdetail = this.listdetail;
      this.getProtocolList(this.page)
    },
    data() {
      return {
        rowDatatemo:[null],
        dialogVisible: false,
        headerData: {
          title: '清单跟踪',
        },
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        tableData: [],
        option: {
          page: true,
          addBtn: false,
          menu: false,
          editBtn: false,
          indexLabel: "序号",
          index: true,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          menuWidth:100,
          keyId: "id",
          column: [{
            label: "清单编号",
            prop: "code",
            cell: true,
            width: 150
          },
            {
              label: "清单名称",
              width:250,
              prop: "title",
              cell: true,
              formatter: function (row, value, label, column) {
                return '<a style="cursor: pointer;" onclick="listdetail(\'' + row.id + '\')">' + value + '</a>';
              }
            },
            {
              label: "清单名称",
              width:250,
              prop: "titleLike",
              search: true,
              hide: true,
              cell: true,
              formatter: function (row, value, label, column) {
                return '<a style="cursor: pointer;" onclick="listdetail(\'' + row.id + '\')">' + value + '</a>';
              }
            },
            {
              label: "清单说明",
              prop: "description",
              cell: true
            },
            {
              label: "状态",
              prop: "state",
              width:100,
              type: "select",
              dicData: [
                {
                  label: "未提交",
                  value: "0"
                },
                {
                  label: "已提交",
                  value: "1"
                },
              ],
              cell: true
            }
          ]
        },
        tableLoading: false,
        titleLikeSearch:''
      };
    },
    methods: {
      getProtocolList(page, params){
        this.tableLoading = true;
        getProtocolListTrack(Object.assign({
          current: page.currentPage,
          size: page.pageSize
        },params)).then(response => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false
        })
      },
      /**
       * 刷新回调
       */
      searchReset() {
        this.titleLikeSearch = '';
        let params = {
          titleLike:this.titleLikeSearch,
        };
        this.getProtocolList(this.page,params)
      },
      searchChange(params) {
        this.page.currentPage = 1
        this.getProtocolList(this.page,this.dealSearchParam(params))
      },
      // 处理搜索过滤
      dealSearchParam(params){
        if(params.titleLike){
          params.titleLike = params.titleLike;
        }
        this.titleLikeSearch = params.titleLike;
        return params;
      },
      currentChange(currentPage) {
        var page = this.page;
        page.currentPage = currentPage;
        let params = {
          titleLike:this.titleLikeSearch,
        };
        this.getProtocolList(page,params);
      },
      sizeChange(pageSize) {
        var page = this.page;
        page.pageSize = pageSize;
        let params = {
          titleLike:this.titleLikeSearch,
        };
        this.getProtocolList(page,params);
      },

      // 清单拟定详情跳转
      listdetail(id) {
        let src =`/listdetail/detail/${id}`;
        this.$router.push({
          path: src
        });
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    }
  };
</script>

<style lang="scss" scoped>
  .card-border {
    border: 1px solid #d2d2d2;
  }
  .card-header {
    background: #f5f5f5;
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
    font-weight: 600;
  }
  .card-body {
    padding: 10px;
  }
  .menu-title {
    float: left;
    margin-right: 6px;
  }
  .menu-title-img {
    width: 25px;
    position: relative;
    top: 7px;
  }
  .menu-title-text {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    margin-left: 0.2rem;
  }
</style>
